html{
    font-size :80px;
}
<template>
    <meta name="viewport" content="user-scalable=0,width=device-width, initial-scale=1.0">
    <div class="background">
        <img src="../../../public/pic/projectPic.PNG" alt="项目图片" class="pic" />
        <div class="intro">
            <div class="title">实验室介绍平台</div>
            <div class="info">
                随着我国城镇和农村居民生活水平达到富裕和小康层次，消费在国民经济活动中的比重逐步加大，居民的餐饮消费逐渐从一日三餐的刚需升级到感受餐饮文化以及社交的重要方式，近年来我国餐饮业销售收入逐年攀升，2019年中国餐饮收入达4.67万亿元，较2018年增加了0.40万亿元，同比增长9.38%
            </div>
            <div>
                <el-row class="mb-2">
                    <el-button type="primary" size="small">项目介绍</el-button>
                    <el-button type="primary" size="small">访问项目</el-button>
                </el-row>
            </div>
        </div>
    </div>
    <div class="whitespace">

    </div>
</template>
  
<script setup>

</script>
  
<style scoped>

.background {
    position: relative;
    background-color:#f9f9f9;
    display: flex;
    padding: 0.1rem;
    width: 12rem;
    height: fit-content;
    align-items: center;
    justify-content: space-around;
    transform: translateX(-50%);
    left: 50%;
    border-radius: 0.3rem;
}
.whitespace{
    width: 12rem;
    height: 0.5rem;
}

.pic {
    width: 45%;
    height: 3.5rem;
    box-shadow: 2px 4px 4px rgba(0,0,0,0.25);
    

}


.intro {
    width: 45%;
    height: 3.5rem;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: space-around;
}

.title {
    font-size: 0.35rem;
    font-weight: 550;
    color: black;
}

.info {
    overflow: hidden;
    /* 显示有限内容 */
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 6;
    -webkit-box-orient: vertical;
    color: #919FAE;
    font-size: 0.2rem;
}
</style>
